import { t } from 'i18next'
import { Wrap } from './style'
import { useParamsStore, tabType } from '../store'
import shallow from 'zustand/shallow'
import { useGlobalStore } from '@/store/global'

export const Tab = () => {
	const { currentTab, tab, update } = useParamsStore(
		(state) => ({
			update: state.update,
			currentTab: state.currentTab,
			tab: state.tab,
		}),
		shallow
	)
	const handleChangeTab = (tab: tabType) => {
		update({ currentTab: tab })
	}
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	return (
		<Wrap>
			<ul>
				{tab.all.canShow && (
					<li className={currentTab === 'all' ? 'active' : ''} onClick={() => handleChangeTab('all')}>
						<span>
							<span className="font">{t('全部终端')}</span> ({tab.all.onlineSize}/{tab.all.size})
						</span>
					</li>
				)}
				{tab.often.canShow && !!SWITCH.showOftenMt && (
					<li className={currentTab === 'often' ? 'active' : ''} onClick={() => handleChangeTab('often')}>
						<span>
							<span className="font">{t('常用终端')}</span> ({tab.often.onlineSize}/{tab.often.size})
						</span>
					</li>
				)}
				{tab.interactive.canShow && (
					<li
						className={currentTab === 'interactive' ? 'active' : ''}
						onClick={() => handleChangeTab('interactive')}
					>
						<span>
							<span className="font">{t('互动终端')}</span> ({tab.interactive.onlineSize}/
							{tab.interactive.size})
						</span>
					</li>
				)}
				{tab.live.canShow && (
					<li className={currentTab === 'live' ? 'active' : ''} onClick={() => handleChangeTab('live')}>
						<span>
							<span className="font">{t('直播与会方')}</span> ({tab.live.size})
						</span>
					</li>
				)}
				{tab.dcs.canShow && (
					<li className={currentTab === 'dcs' ? 'active' : ''} onClick={() => handleChangeTab('dcs')}>
						<span>
							<span className="font">{t('数据协作方')}</span> ({tab.dcs.onlineSize}/{tab.dcs.size})
						</span>
					</li>
				)}
				{currentTab === 'live' && (
					<div className="tips">
						{t('游客数:')} {tab.live.guestSize}
					</div>
				)}
			</ul>
		</Wrap>
	)
}
